<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
import type { DepartData } from '@/types/consult';
import { computed, ref } from 'vue';
import { departmentListApi } from '@/apis/consult'


defineProps<{
  type: number
  illnessType:number
}>()
const departmentList = ref<DepartData[]>([])
const getDepartment = async () => {
  const res = await departmentListApi()
  departmentList.value=res
  // console.log(res);
  
}
getDepartment()
//2.一级科室切换
const currenIndex = ref(0)
const changIndex = (index: number) => {
  currenIndex.value=index
}
//3.二级科室
const childList = computed(() => {
  return departmentList.value[currenIndex?.value].child
})
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view v-for="(item,index) in departmentList" :key="item.id" class="department-item"
        :class="{active:index===currenIndex}" @click="changIndex(index)">{{ item.name }}</view>

    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator v-for="child in childList" :key="child.id" hover-class="none"
        :url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${child.id}`"
        class="department-item">
        {{child.name}}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>